<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>周边</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

	 <link rel="stylesheet" href="/staticFiles/css/sm/sm.min.css">
    <link rel="stylesheet" href="/staticFiles/css/sm/sm-extend.min.css">
    <link rel="stylesheet" href="/staticFiles/css/main.css">
    
    <style type="text/css">
    	.content-title {
    		padding-left:10px;
    	}
    	
    	.icon{
	    	 width: 3.0rem;
			  height: 3.0rem;
    	}
    	.icon-nei001{
		  background-image: url("/staticFiles/image/neighbor/hq0001.jpg");
    	}
    	.icon-nei002{
		  background-image: url("/staticFiles/image/neighbor/jlf0001.jpg");
    	}
    	.icon-nei003{
		  background-image: url("/staticFiles/image/neighbor/wem0001.jpg");
    	}
    	.icon-nei004{
		  background-image: url("/staticFiles/image/neighbor/hq0001.jpg");
    	}
    	
    	.item-inner.item-address{
    		
    	}
    	
    	.content-title{
    		height: 1.89rem;
    		line-height:1.89rem;
    	}
    	.list-block{
    		margin-top: 0; 
    	}
    	
    	.item-first{
    		float:left;
    	}
    	
    	.item-left-content{
    		display: inline-block;
    	}
    	
    	.item-after{
    		float:right;
    		line-height: 4rem;
    	}
    		
    	.item-flex{
			display: block;
			/*height: 4rem;    	*/
    	}
    	.item-address{
    		    font-size: .68rem;
    			font-weight: bold;
    	}
    </style>
  </head>
  <body>
    <!-- 你的html代码 -->
    <script type='text/javascript' src='/staticFiles/js/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/staticFiles/js/sm/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/staticFiles/js/sm/sm-extend.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/staticFiles/js/main.js' charset='utf-8'></script>

    <div class="page">
  <div class="content">
  		<div class="swiper-container" data-space-between='10' style="height:8.00rem;">
		    <div class="swiper-wrapper" style="width:100%;height:8rem">
		      <div class="swiper-slide"   style="width:100%;height:100%;" ><img    style="width:100%;height:100%;"  src="/staticFiles/image/neighbor/001.png" alt=""></div>
		      <div class="swiper-slide"   style="width:100%;height:100%;" ><img    style="width:100%;height:100%;"  src="/staticFiles/image/neighbor/001.png" alt=""></div>
		      <div class="swiper-slide"   style="width:100%;height:100%;" ><img    style="width:100%;height:100%;"  src="/staticFiles/image/neighbor/001.png" alt=""></div>
			</div>
		    <div class="swiper-pagination"></div>
	  </div>
	  <div class="content-title">商家推荐</div>
	  <div class="list-block ">
	    <ul>
	      <li>
	       	 <div class="item-inner item-flex" style="display: block;">
		        <div class="item-first"><i class="icon icon-nei001"></i></div>
	        	<div class="item-left-content">
		          <div class="item-title">红旗连锁超市</div>
		          <div class="item-level">
		          		
		          </div>
		          <div class="item-address">武侯区碧云路3号附11号</div>
	        	</div>
		        <div class="item-after "><span class="color-blue">118</span>米</div>
	        </div>
	      </li>
	      <li>
	       	 <div class="item-inner"  style="display: block;">
		        <div class="item-first"><i class="icon icon-nei002"></i></div>
	        	<div class="item-left-content">
		          <div class="item-title">家乐福（红牌楼店）</div>
		          <div class="item-level"></div>
		          <div class="item-address">佳灵路7号红牌楼广场B1楼</div>
	        	</div>
		        <div class="item-after "><span class="color-blue">216</span>米</div>
	        </div>
	      </li>
	      <li>
	       	 <div class="item-inner"  style="display: block;">
		        <div class="item-first"><i class="icon icon-nei003"></i></div>
	        	<div class="item-left-content">
		          <div class="item-title">沃尔玛（武侯店）</div>
		          <div class="item-level"></div>
		          <div class="item-address">高升桥东路6号罗马假日广场 </div>
	        	</div>
		        <div class="item-after "><span class="color-blue">345</span>米</div>
	        </div>
	      </li>
	      <li>
	       	 <div class="item-inner"  style="display: block;">
		        <div class="item-first"><i class="icon icon-nei004"></i></div>
	        	<div class="item-left-content">
		          <div class="item-title">红旗连锁超市</div>
		          <div class="item-level"></div>
		          <div class="item-address">武侯祠横街18号附10-12号</div>
	        	</div>
		        <div class="item-after "><span class="color-blue">513</span>米</div>
	        </div>
	      </li>
	    </ul>
	  </div>
  </div>
</div>

<script type="text/javascript">
$(function() {
	$(".swiper-container").swiper({
        pagination: '.swiper-pagination',
       autoplay: 2500,
       autoplayDisableOnInteraction: false
    });
	  
	});
</script>
  </body>
</html>